<template lang="html">
<div id="plan_detail">
    <!-- 计划的title -->
    <div class="title" v-if='plan_detail != null' :style="{ backgroundImage: 'url(' + plan_detail.image + ')' }">
        <h1>{{plan_detail ? plan_detail.name : ''}}</h1>
        <p v-if="current_plan.message == '' ? true : false">
            共<span>{{current_plan.data== null ? 0 : current_plan.data.today}}</span>/{{current_plan.data== null ? 0 : current_plan.data.allday}}天
        </p>
        <p v-else>共{{plan_detail ? plan_detail.day : 0}}天</p>
    </div>
    <!--计划的金额和消耗-->
    <div class="kcal-wrapper">
        <div class="kcal">
            <span v-if='getUserInfo.weight == 0 && getUserInfo.height == 0'>总消耗：{{plan_detail ? plan_detail.kcal : 0 }}千卡</span>
            <span v-else>总消耗：{{ plan_detail ? plan_detail.dynamicKcal : 0  }}千卡</span>
            <span v-if="false">总金额：{{ money(plan_detail.courses) }}元</span>
        </div>
    </div>
    <!--计划的介绍-->
    <div class="content">
        <p>计划介绍：</p>
        <p>{{plan_detail ? plan_detail.description : ''}}</p>
    </div>
    <!-- 计划的总的详情及课程 -->
    <div class="box">
        <!--  从总计划页面进入渲染该计划 -->
        <ul class="clearfix"  v-if = 'current_plan.data == null' > 
            <router-link v-for="(course, index) in plan_detail.courses" :key="index" tag="li" :to="{ name: 'course_detail', params: {id: course.id,
                    date: (($route.params.date == null || $route.params.date == '') ? getToday() :$route.params.date)}}" :class="{ disable:course.id == 0 }">
                <div class="item" :style="'background-image: url('+$qiniu.url+'assets/img/bg1-1-1.jpg)'" v-if="course.id == 0">
                    <div class="text">
                        <div class="word">
                            <span class="name rests">
                    <i
                        class="rest"
                    :style= "'background-image: url('+$qiniu.url+'assets/img/休息.png)'"></i>
                    <span >{{course.name}}</span></span>
                        </div>
                    </div>
                </div>
                <div class="item" :style="{ backgroundImage: 'url(' + course.image + ')' }" v-else>
                    <div class="text">
                        <div class="word">
                            <span class="name">{{course.name}}</span>
                            <div class="middle">
                                <span>时间：{{course.duration }}</span> 
                                <span v-if='getUserInfo.weight == 0 && getUserInfo.height == 0'>消耗：{{course.kcal}}千卡</span>
                                <span v-else>消耗：{{ course.dynamicKcal  }}千卡</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="index-wrapper">
                    <div class="index">
                        <p> 第{{index+1}}天 </p>
                    </div>
                </div>
            </router-link>
        </ul>
        <!-- 表示从课程表界面进入获取的当前计划 -->
        <ul class="clearfix" v-else>
            <li  v-for = '(course,index) in current_plan.data.courses'  :key="index"  :to="{ name: 'course_detail', params: {id: 1,date: $route.params.date}}">
                 <!-- 阴影即遮罩 -->
                 <div class="shadewrapper" @click="detailInfo(course.courses[0])" v-if = 'course.courses[0].id  != 0'>
                        <div v-if='isNow == false'  :class="{shade: (current_plan.data != null && (current_plan.data.today >= index+1 ? true : false))}"></div>
                        <div v-else :class="{shade: (current_plan.data != null && (current_plan.data.today > index+1 ? true : false))}"></div>
                        <div v-if="(isNow == false) && current_plan.data != null && ((current_plan.data.today >= index+1 ? true : false))">   
                            <div class="finish">{{ course.courses[0].finished == false ? '未完成' : '已完成' }}</div>
                        </div>
                        <div v-if="(isNow == true) && current_plan.data != null && ((current_plan.data.today > index+1 ? true : false))">   
                            <div class="finish">{{ course.courses[0].finished == false ? '未完成' : '已完成' }}</div>
                        </div>
                 </div>
                 <!--<div class="shadewrapper"  v-if = 'course.courses[0].id  == 0'>
                        <div :class="{shade: (current_plan.data != null && (current_plan.data.today >= index+1 ? true : false))}"></div>
                        <div>   
                            <div class="finish">休息</div>
                        </div>
                 </div>-->
                 <!-- 主要的课程信息 -->
                 <!-- 休息的部分 -->
                 <div class="itemwrapper" @click='waitInfo(course.courses[0])'>
                        <div class="item" :style="'background-image: url('+$qiniu.url+'assets/img/bg1-1-1.jpg)'"  v-if="course.courses[0].id  == 0">
                            <div class="text">
                                <div class="word">
                                    <span class="name rests">
                                    <i class="rest" :style= "'background-image: url('+$qiniu.url+'assets/img/休息.png)'"></i>
                                    <span >{{course.courses[0].name}}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="item" :style="{ backgroundImage: 'url(' + course.courses[0].image + ')' }" v-else>
                            <div class="text">
                                <div class="word">
                                    <span class="name one_txt_cut">{{course.courses[0].name}}</span>
                                    <div class="middle">
                                        <span>时间：{{ course.courses[0].duration }}</span> 
                                        <span v-if='getUserInfo.weight == 0 && getUserInfo.height == 0'>消耗：{{course.courses[0].kcal}}千卡</span>
                                        <span v-else>消耗：{{ course.courses[0].dynamicKcal  }}千卡</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="index-wrapper">
                            <div class="index">
                                <p> 第{{index+1}}天 </p>
                                <!--日期如果过了并且就不显示-->
                                <span v-if='(isNow == true) && (current_plan.data.today <= index+1 ? true : false) '>{{ course.courses[0].finished == false ? '待完成' : '已完成' }}</span>
                            </div>
                        </div>
                 </div>    
            </li>
        </ul>
    </div>
    <!--仅仅只让今天才能删除计划-->
    <div v-if='isTodayN == true ? true :false'>
        <div class="btn" v-if="(current_plan.message != '' ? true : false) ">
            <span class="plan" id="plus" @touchstart="touchstart" @click="plus()">添加计划</span>
        </div>
        <div class="btndel" :id='current_plan.data!=null?current_plan.data.deletePlanID :0' v-else @click="show()">
            删除计划
        </div>
    </div>
    <div id="success" class="success">
        <span class="deltips">恭喜您添加成功！</span>
        <span class="successbtn" @click="success()">确认</span>
    </div>
    <!-- 删除的toolTips-->
    <ToolTip :select='select' v-on:plus='plus' v-on:hide='hide' v-on:deletes='deletes'></ToolTip>
    <div class="modelwrapper1">
    </div>
    <!--toast-->
    <Toast :showtoast = 'showtoast'></Toast>
    <div class="model-wrapper"></div>
    <Loading v-if="LoadingShow"></Loading>
</div>
</template>
<script>
    import Loading from '../loading';
    import ToolTip from '../common/tooltips.vue';
    import Toast from '../common/toast.vue';
    import api from '../../api';
    import {
        refreshTitle,
        getToday,
        compareDate,
        today,
    } from "../../tools.js";
    export default {
        components: {
            Loading,
            ToolTip,
            Toast,
        },
        data() {
            return {
                current_plan: {
                    data: null,
                    message: ''
                },
                select: null,
                showtoast: null,
                todayD: null,
                planID: 0,
            }
        },
        created() {
            refreshTitle(this.$route.meta.title);
            //拉取当前计划
            var date = this.$route.params.date;
            var that = this;
            if (this.$route.params.name == 'plan') {
                api.getCurrentPlan().then(response => {
                    that.detailResponse(response, that);
                    // 获取详细计划的id
                    that.planID = that.$route.params.id == 1 ? response.data.result.plan.id : that.$route.params.id;
                    that.$store.dispatch('GET_PLAN_DETAIL', that.planID);
                });
            } else {
                api.getCurrentPlan(date).then(response => {
                    that.detailResponse(response, that);
                    that.planID = that.$route.params.id == 1 ? response.data.result.plan.id : that.$route.params.id;
                    that.$store.dispatch('GET_PLAN_DETAIL', that.planID);
                    // console.log(that.planID);
                    var t1 = today();
                    var t2 = today(that.current_plan.data.end);
                    var t3 = today(that.current_plan.data.start);
                    // alert(t3 <= t1)
                    if (t3 <= t1 && 　t1 <= t2) {
                        // 表示在计划中
                        that.current_plan.data.today = that.current_plan.data.today;
                    } else {
                        that.current_plan.data.today = that.current_plan.data.allday;
                    }
                });
            }
        },
        computed: {
            LoadingShow() {
                return this.$store.state.loadings.show
            },
            plan_detail() {
                return this.$store.state.plan.plan_detail
            },
            isNow() {
                var NowYear = getToday(new Date()).year,
                    NowMonth = getToday(new Date()).month,
                    NowDay = getToday(new Date()).day;
                var arr = this.$route.params.date.split('-');
                // 当小于今天的日期的时候，按钮均不给显示
                var today = {
                    year: arr[0],
                    month: arr[1],
                    day: arr[2],
                }
                if (NowMonth == today.month) {
                    if (today.day < NowDay) {
                        return false;
                    } else {
                        return true;
                    }
                } else if (NowMonth > today.month) {
                    return false;
                } else if (NowMonth < today.month) {
                    return true;
                }
            },
            isTodayN() {
                var NowYear = getToday(new Date()).year,
                    NowMonth = getToday(new Date()).month,
                    NowDay = getToday(new Date()).day;
                var arr = this.$route.params.date.split('-');
                // 当小于今天的日期的时候，按钮均不给显示
                var today = {
                    year: arr[0],
                    month: arr[1],
                    day: arr[2],
                }
                if (NowMonth == today.month && NowYear == today.year && NowDay == today.day) {
                    return true;
                } else {
                    return false;
                }
            },
            getUserInfo() {
                return this.$store.state.user
            },


        },
        methods: {
            isToday() {
                var NowYear = getToday(new Date()).year,
                    NowMonth = getToday(new Date()).month,
                    NowDay = getToday(new Date()).day;
                var arr = this.$route.params.date.split('-');
                // 当小于今天的日期的时候，按钮均不给显示
                var today = {
                    year: arr[0],
                    month: arr[1],
                    day: arr[2],
                }
                if (NowMonth == today.month) {
                    if (today.day < NowDay) {
                        return false;
                    } else {
                        return true;
                    }
                } else if (NowMonth > today.month) {
                    return false;
                } else if (NowMonth < today.month) {
                    return true;
                }
            },
            getToday() {
                return today()
            },
            compareDate(date1, date2) {
                return compareDate(date1, date2);
            },
            money(courses) {
                // return courses.reduce(function(acc,cur){
                //     return acc.price + cur.price
                //   })
                var sum = 0;
                // function getSum(item, index) {
                //     sum += item.price;
                // };
                // courses.forEach(getSum);
                for (var i = 0; i < courses.length; i++) {
                    sum += courses[i].price
                }
                return sum

            },
            //判断是否有计划
            judge() {
                //console.log(id2);
                var id = this.$route.params.id;
                var date = this.$route.params.date;
                //禁用点击
                var btn = document.getElementById('plus');
                btn.style.pointerEvents = "none";
                btn.style.opacity = "1";
                setTimeout(() => {
                        //console.log(btn)
                        btn.style.pointerEvents = "auto";
                    }, 3000)
                    // if (id2 != null) {
                document.querySelector('.modelwrapper1').style.display = "block";
                this.select = 'replane';
                // } else {
                this.plus(id1, date);
                // }
            },
            //添加计划
            plus() {
                var self = this;
                var id = this.$route.params.id;
                var date = this.$route.params.date;
                api.plusPlan(id, date).then(response => {
                    if (response.status == 200) {
                        this.select = null;
                        document.querySelector('.modelwrapper1').style.display = "block";
                        document.getElementById('success').style.display = "block";
                    }
                })
            },
            success() {
                this.$router.push('/today');
            },
            hide() {
                const none = 'none';
                document.querySelector('.modelwrapper1').style.display = 'none';
                document.getElementById('success').style.display = 'none';
                this.select = null;
            },
            touchstart() {
                var btn = document.getElementById('plus');
                btn.style.opacity = "0.5";
            },
            show() {
                document.querySelector('.modelwrapper1').style.display = "block";
                this.select = "delplan";
            },
            deletes() {
                var id = document.querySelector(".btndel").getAttribute("id");
                var that = this;
                var date = this.$route.params.date;
                api.delete_current_plan(id).then(response => {
                    that.hide();
                    // 进行路由的跳转
                    that.$router.replace({
                        name: 'plan',
                        params: {
                            date: date,
                        }
                    });
                })
            },
            detailInfo(item) {
                // 当是过去的日子的时候
                var that = this;
                if (item.finished == false) {
                    // 弹出toast
                    that.showToast(that);
                } else {
                    // that.setResult(item, that);
                    api.getResultBY(item.pushid).then(function(response) {
                        if (response.data.code === 201) {
                            // 表示没有pushid的健身数据
                            that.showToast(that);
                        } else if (response.data.code === 200) {
                            // that.setResult(item, that);
                            var id = item != '' ? item.pushid : 1;
                            var title = item != '' ? item.name : '';
                            window.location.href = "http://share.shapejoy.com/wechat/" + id + '?' + title;
                        }
                    })
                }


            },
            // 待完成的课程---跳转到课程详情页面
            waitInfo(item) {
                var that = this;
                if (item.finished != true) {
                    // 跳转到课程详情页面
                    if (item.id == 0) {
                        return; // 当休息的时候不让点击；
                    } else {
                        that.setCourse(item, that);
                    }
                } else {
                    // 跳转到结果页面
                    // that.setResult(item, that);
                    api.getResultBY(item.pushid).then(function(response) {
                        if (response.data.code === 201) {
                            // 表示没有pushid的健身数据
                            that.showToast(that);
                        } else if (response.data.code === 200) {
                            // that.setResult(item, that);
                            var title = item != '' ? item.name : '';
                            window.location.href = "http://share.shapejoy.com/wechat/" + id + '?' + title;
                        }
                    })
                }
            },
            // 弹出toast
            showToast(that) {
                var model = document.querySelector(".model-wrapper");
                // toast.classList.add("show");
                that.showtoast = 'nojianshen';
                model.style.display = "block";
                setTimeout(function() {
                    that.showtoast = null;
                    model.style.display = "none";
                }, 1000)
            },
            // 进行结果页的跳转
            setResult(item, that) {
                that.$router.push({
                    name: 'result',
                    params: {
                        id: item != '' ? item.pushid : 1,
                        title: item != '' ? item.name : '',
                        name: that.$route.name,
                    }
                })
            },
            // 进行课程详情页面的跳转
            setCourse(item, that) {
                that.$router.push({
                    name: 'course_detail',
                    params: {
                        id: item.id,
                    },
                    query: {
                        date: that.$route.params.date,
                        name: that.$route.name,
                    }
                })
            },
            // 对获取的数据进行处理
            detailResponse(response, that) {
                if (response.data.code == 100) {
                    that.current_plan.message = '';
                    // 表示当前是有计划的
                    var response = response.data.result;
                    response.plan.dynamicKcal = 0;
                    for (var i = 0; i < response.courses.length; i++) {
                        response.courses[i].courses[0].duration = response.courses[i].courses[0].duration > 60 ? parseInt(response.courses[i].courses[0].duration / 60) + '分钟' : response.courses[i].courses[0].duration + '秒'
                        response.courses[i].courses[0].dynamicKcal = parseInt(response.courses[i].courses[0].dynamicKcal);
                        response.courses[i].courses[0].kcal = parseInt(response.courses[i].courses[0].kcal);
                    }
                    that.current_plan.data = response;
                    that.current_plan.data.plan.kcal = that.current_plan.data.plan.kcal.toFixed(0);
                    that.todayD = response.end;
                } else {
                    that.current_plan.message = response.data.message;
                }
            }

        },

    }
</script>
<style lang="css">
    #plan_detail {
        font-size: 16px;
        background-color: #161616;
        color: #fdb803;
        line-height: 2;
        .disable {
            pointer-events: none;
        }
        .shade {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            position: absolute;
            left: 0;
            top: 0;
            z-index: 900;
            /*display: none;*/
        }
        .finish {
            border: 1px solid #fdb803;
            z-index: 903;
            width: 50%;
            text-align: center;
            color: #fdb803;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .title {
            background-color: #161616;
            text-align: center;
            background-size: cover;
            background-repeat: space;
            padding-bottom: 10%;
            padding-top: 10%;
            h1 {
                border-bottom: 1px solid #fdb803;
                font-size: 25px;
                margin-left: 15%;
                margin-right: 15%;
                /*padding-top: 8%;*/
                line-height: 1;
                padding-bottom: 3%;
            }
            p {
                border: 1px solid #fdb803;
                width: 30%;
                padding: 1% 3%;
                margin: 3% auto 0 auto;
                span {
                    color: #fff;
                }
            }
        }
        .kcal-wrapper {
            border-bottom: 1px solid #fdb803;
            .kcal {
                /*background-color: #fdb803;*/
                color: #fdb803;
                /*font-weight: 500;
                margin-bottom: 8px;
                margin-top: 6px;*/
                text-align: center;
                span {
                    /*padding-top: 4%;
                    padding-bottom: 4%;*/
                }
                span:nth-of-type(1) {
                    /*padding-left: 6%;*/
                    margin-left: auto;
                    display: block;
                }
                span:nth-of-type(2) {
                    padding-left: 10%;
                }
            }
        }
        .content {
            padding-left: 6%;
            padding-right: 6%;
            padding-bottom: 4%;
            padding-top: 3%;
            p:nth-of-type(1) {
                font-size: 18px;
            }
            p:nth-of-type(2) {
                font-size: 14px;
            }
        }
        .box {
            background-color: #161616;
            margin-top: 1%;
            margin-bottom: 5%;
            ul {
                padding-bottom: 40px;
                li {
                    padding-top: 5%;
                    padding-bottom: 3%;
                    border-top: 1px solid #fdb803;
                    position: relative;
                    .index-wrapper {
                        display: inline-block;
                        text-align: center;
                        height: 6rem;
                        margin-left: 4%;
                        margin-right: 4%;
                        /*margin-left: 2%;*/
                        .index {
                            color: #fdb803;
                            position: absolute;
                            top: 50%;
                            width: 20%;
                            transform: translateY(-50%);
                            font-size: 14px;
                            p:nth-of-type(1) {
                                border: 1px solid #fdb803;
                                /*width:165%;*/
                                padding-left: 3%;
                                padding-right: 3%;
                            }
                            span {
                                display: inline-block;
                                /*width: 165%;*/
                                font-size: 12px;
                            }
                        }
                    }
                    .itemwrapper {
                        width: 100%;
                        height: 6rem;
                    }
                    .item {
                        /*background-image: url('../../assets/img/3.jpg');*/
                        display: inline-block;
                        background-size: 100%;
                        background-repeat: space;
                        color: #fdb803;
                        height: 6rem;
                        width: 65%;
                        margin-left: 5%;
                        position: relative;
                        .text {
                            position: absolute;
                            width: 100%;
                            height: inherit;
                            left: 0;
                            top: 0;
                            background-color: rgba(0, 0, 0, .6);
                            box-sizing: border-box;
                            .word {
                                margin-top: 5%;
                                margin-bottom: 5%;
                                margin-left: 5%;
                                .rest {
                                    display: inline-block;
                                    transform: scale(0.6, 0.6);
                                    width: 40px;
                                    height: 40px;
                                    margin-bottom: -10px;
                                    margin-right: -5px;
                                }
                                .rests {
                                    position: absolute;
                                    top: 50%;
                                    transform: translateY(-63%);
                                    line-height: 1.2;
                                }
                                .name {
                                    font-weight: 400;
                                    font-size: 18px;
                                    border-bottom: 1px solid #fdb803;
                                    padding-bottom: 1%;
                                }
                                .middle {
                                    span {
                                        margin-right: 1.5%;
                                        font-size: 14px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .btn {
            position: fixed;
            bottom: 50px;
            left: 0;
            width: 100%;
            text-align: center;
            font-size: 1rem;
            line-height: 2.5rem;
            a,
            span {
                display: inline-block;
                padding-top: 0.2rem;
                padding-bottom: 0.2rem;
            }
            .plan {
                background-color: #fdb803;
                width: 100%;
                color: #161616;
            }
        }
        .btndel {
            width: 50%;
            height: 30px;
            background-color: #fdb803;
            margin-left: 25%;
            margin-bottom: 30px;
            color: #161616;
            line-height: 30px;
            text-align: center;
            font-size: 14px;
        }
        .success {
            position: fixed;
            z-index: 1005;
            display: none;
            width: 60%;
            padding: 10px 0 15px 0;
            bottom: 50%;
            left: 50%;
            text-align: center;
            /*padding: 10px 20px 20px 10px;*/
            -webkit-transform: translate(-50%);
            border: 1px solid rgba(253, 184, 17, 1)
        }
        .success .deltips {
            font-size: 16px;
            width: 70%;
            line-height: 40px;
            margin-left: 15%;
            text-indent: 4px;
            display: block;
            border-bottom: 1px solid rgba(253, 184, 17, .6);
            margin-bottom: 15px;
        }
        .success .successbtn {
            display: block;
            width: 70%;
            font-size: 16px;
            line-height: 30px;
            background-color: rgba(253, 184, 17, 1);
            color: #161616;
            margin-left: 15%;
        }
        .modelwrapper1 {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 900;
            background-color: rgba(0, 0, 0, .7);
            display: none;
        }
        .model-wrapper {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            text-align: center;
            z-index: 998;
        }
    }
</style>